<template>
  <div class="address">
    <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" />
    <van-popup v-model:show="show" round position="bottom">
      <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
        @finish="onFinish" />
    </van-popup>

  </div>
</template>

<script>
import { useCascaderAreaData } from '@vant/area-data';
export default {
  data() {
    return {
      show: false,
      fieldValue: '',
      cascaderValue: '',
      options: useCascaderAreaData()
    }
  },
  methods: {
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    }
  }
}
</script>

<style lang="less" scoped>
.address {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
}
</style>